<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>VueTest</title>
</head>
<link href="js-support/Bootstrap_v2.3.2/css/bootstrap.min.css" rel="stylesheet">
<!--<script src="https://unpkg.com/vue"></script>-->
<!--<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">-->
<script>
    function getNowTime() {
        new Date().getDate()
        var date = new Date();
        var seperator1 = "-";
        var seperator2 = ":";
        var month = date.getMonth() + 1;
        var strDate = date.getDate();
        var hour = date.getHours();
        var minutes = date.getMinutes();
        var seconds = date.getSeconds();
        if (month >= 1 && month <= 9) {
            month = "0" + month;
        }
        if (strDate >= 0 && strDate <= 9) {
            strDate = "0" + strDate;
        }
        if (hour >= 0 && hour <= 9) {
            hour = "0" + hour;
        }
        if (minutes >= 0 && minutes <= 9) {
            minutes = "0" + minutes;
        }
        if (seconds >= 0 && seconds <= 9) {
            seconds = "0" + seconds;
        }
        var currentdate = date.getFullYear() + seperator1 + month + seperator1 + strDate
                + " " + hour + seperator2 + minutes
                + seperator2 + seconds;
        return currentdate;
    }
    window.onload = function(){
//        var c = new Vue({
//            el: '#app',
//            data: {
//                message: 'Hello Vue.js!'
//            }
//        })
//        var app2 = new Vue({
//            el: '#app-2',
//            data: {
//                message: '页面加载于 ' + new Date().toLocaleString()
//            }
//        })
//        var app3 = new Vue({
//            el: '#app-3',
//            data: {
//                seen: true
//            }
//
//        })
//        var nowTime =
        var app = new Vue({
            el: '#app-4',
            data: {
                items: [
                    { name: '王敏',age: '19' ,time:new Date()},
                    { name: '张涵予',age: '21',time:new Date()},
                    { name: '刘晨斌',age: '20',time:new Date() }
                ]
            },
            methods: {
                addPeople: function () {
                    console.log("addPeople");
                    console.log("this.name="+this.name);
                    console.log("this.age="+this.age);
                 if(!this.name)  // if(this.name=="" || this.name== undefined||this.name==null)
                    {
                        console.log("this.name为空");
                    }
                    else if(!this.age) //(this.age=="" || this.age== undefined||this.age==null)
                    {
                        console.log("this.age为空");
                    }else{
                        this.items.push( { name:this.name,age:this.age ,time:new Date()});
                    }
                },
                removeAll: function () {
                    console.log("removeAll");
                   // this.items=[];
                    this.name="";
                    this.age="";
                    this.$emit('input', "")
                    console.log(this.name);
                    console.log(this.age);
                },
                removeArray: function () {
                    console.log("removeArray");
                    this.items=[];
//                    this.name="";
//                    this.age="";
                }, removeItem: function (index) {
                    console.log("removeArray");
                    this.items.splice(index,1);
//                    this.name="";
//                    this.age="";
                }
            },
            filters: {
                hhmmss: function (date) {
                    var month = date.getMonth() + 1;
                    var strDate = date.getDate();
                    var hour = date.getHours();
                    var minute = date.getMinutes();
                    var second = date.getSeconds();
                    if (hour >= 0 && hour <= 9) {
                        hour = "0" + hour;
                    }
                    if (minute >= 0 && minute <= 9) {
                        minute = "0" + minute;
                    }
                    if (second >= 0 && second <= 9) {
                        second = "0" + second;
                    }
                    return (date.getFullYear()+"-"+month+"-"+strDate+" "+hour + ":" + minute + ":" + second)
                },
                capitalize: function (value) {
                    if (!value) return ''
                    value = value.toString()
                    return value.charAt(0).toUpperCase() + value.slice(1)
                }
            }
        })

//        var app5 = new Vue({
//            el: '#app-5',
//            data: {
//                message: 'Hello Vue.js!'
//            },
//            methods: {
//                reverseMessage: function () {
//                    this.message = this.message.split('').reverse().join('')
//                }
//            }
//        })

    }

</script>
<script src="js-support/Vuejs/Vue.js"></script>
<body>

<!--<div id="app">-->
    <!--<p>{{ message }}</p>-->
<!--</div>-->
<!--<div id="app-2">-->
  <!--<span v-bind:title="message">-->
    <!--鼠标悬停-->
  <!--</span>-->
<!--</div>-->
<!--<div id="app-3">-->
    <!--<p v-if="seen">现在你看到我了</p>-->




</div>
<div id="app-4">
    <div>
        <div class="form-group">
            <label for="firstname" class="col-sm-2 control-label">名字</label>
            <div class="col-sm-10">
                <input type="text" class="form-control" id="firstname" placeholder="请输入名字" v-model="name">
            </div>
        </div>
        <div class="form-group">
            <label for="lastname" class="col-sm-2 control-label">年龄</label>
            <div class="col-sm-10">
                <input type="text" class="form-control" id="lastname" placeholder="请输入年龄"  v-model="age">
            </div>
        </div>

        <div class="form-group">
            <div class="col-sm-offset-2 col-sm-10">
                <button type="button" class="btn btn-primary" v-on:click="addPeople">添加</button>
                <button type="button" class="btn btn-warning" v-on:click="removeAll">清空</button>
            </div>

        </div>

    </div>




    <table class="table">
        <caption>人员信息表</caption>
        <thead>
        <tr>
            <th>编号</th>
            <th>姓名</th>
            <th>年龄</th>
            <th>添加时间</th>
            <th>操作</th>
        </tr>
        </thead>
        <tbody>
        <tr v-for="(item,index) in items">
            <td> {{ index+1 }}</td>
            <td> {{ item.name }}</td>
            <td> {{ item.age }}</td>
            <td>{{ item.time | hhmmss }}</td>
            <td>  <button type="button" class="btn btn-warning" v-on:click="removeItem(index)">删除</button> </td>
        </tr>
        </tbody>
    </table>
    <button type="button" class="btn btn-danger" v-on:click="removeArray">清空所有</button>
</div>
<!--<div id="app-5">-->
    <!--<p>{{ message }}</p>-->
    <!--<button  type="button" class="btn btn-primary" v-on:click="reverseMessage">逆转消息</button>-->
<!--</div>-->
</body>
</html>